<template>
  <div class="app-container">
    <div style="margin-top: 15px;" class="app-header">
      <div class="header-left">
        <div class="search-title">名称/型号</div>
        <div class="top-input">
          <el-input placeholder="请输入内容" class="input-with-select" v-model="keyword" @keyup.enter.native="handleEnter">
            <el-button slot="append" icon="el-icon-search" @click="searchBtn"></el-button>
          </el-input>
        </div>
      </div>
      <div class="header-right">
        <el-button type="primary" class="header-btn-one" @click.native="handleExport">导出数据</el-button>
        <el-button type="success" class="header-btn-two" @click.native="showModel">新增配件</el-button>
      </div>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      ref="elTable"
    >
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ scope.$index + (paginationIndex - 1) * 15 + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="编号" width="150">
        <template slot-scope="scope">
          {{ scope.row.number }}
        </template>
      </el-table-column>
      <el-table-column label="名称"  align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="库存" width="150" align="center" >
        <template slot-scope="scope">
          <a href="javascript:;">
            <span @click="getStores(scope)" style="color: #5a98de">
            {{ scope.row.count }}
            </span>
          </a>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="价格" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="300">
        <template slot-scope="scope">
          <el-row>
            <el-button size="mini" type="success" @click.native="enterStorage(scope)">入库</el-button>
            <el-button size="mini" type="primary" @click.native="outStorage(scope)">出库</el-button>
            <el-button size="mini" type="info" @click.native="deleteItem(scope)">删除</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <Dialog class="dialog" ref="dialog" @refreshList="refreshList"></Dialog>
    <Pagination @submit="handleSubmit" :total="total"></Pagination>
    <dialog-enter ref="dialogEnter" @fetchData="handleFetchData" :id="id"></dialog-enter>
    <dialog-leave ref="dialogLeave" @fetchData="handleFetchData" :id="id"></dialog-leave>
  </div>
</template>

<script>
import { getList} from '@/api/table'
import {searchResult, exportResult} from '@/api/operations'
import {enterStorage, outStorage, deleteItem} from '@/api/operations'
import Dialog from '@/views/dialog/dialog'
import Pagination from '@/views/pagination/pagination'
import DialogEnter from '@/views/table/dialogEnter'
import DialogLeave from '@/views/table/dialogLeave'
export default {
  components: {
    Dialog,
    Pagination,
    DialogEnter,
    DialogLeave
  },
  created() {
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: false,
      total: 0,
      page: 1,
      paginationIndex: 1,
      keyword: '',
      searchList: [],
      id: 0
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleFetchData() {
      this.fetchData()
    },
    getStores(scope) {
      console.log(scope.row.id)
      this.$router.push({path: `/example/tree/${scope.row.id}`})
    },
    handleExport() {
      exportResult()
        .then((res) => {
          let b = new Blob([res], { type: 'application/vnd.ms-excel' })
          let url = URL.createObjectURL(b)
          let link = document.createElement('a')
          link.download = '吉尼配件信息’.xlsx'
          link.href = url
          link.click()
          //兼容火狐
          let evt = document.createEvent("MouseEvents")
          evt.initEvent("click", false, false)
          link.dispatchEvent(evt)
          link.remove()
          window.URL.revokeObjectURL(url)
          // console.log(res)
        })
    },
    handleEnter() {
      this.searchBtn()
    },
    refreshList() {
      this.fetchData()
    },
    searchBtn() {
      this.page = 1
      this.paginationIndex = 1
      this.total = 0
      let params = Object.assign({}, {page: this.page, keyword: this.keyword})
      this._searchResult(params)
    },
    _searchResult(params) {
      searchResult(params)
        .then((res) => {
          if (res.code === 200) {
            this.total = res.data.total
            this.searchList = res.data.list
            this.list = this.searchList
          }
        })
    },
    deleteItem(scope) {
      let _this = this
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          async function request (params) {
            await deleteItem(params)
            _this.fetchData()
          }
          request(scope.row.id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });         
        })
    },
    enterStorage(scope) {
      // console.log(scope)
      this.id = scope.row.id
      this.$refs.dialogEnter.changeDialogFormVisible()
      
      
    },
    outStorage(scope) {
      this.id = scope.row.id
      this.$refs.dialogLeave.changeDialogFormVisible()
    },
    handleSubmit(val) {
      this.paginationIndex = val
      if (this.list.length === 0) return
      this.page = val
      // console.log(this.page)
      if (this.searchList.length > 0) {
        let params = Object.assign({}, {page: this.page, keyword: this.keyword})
        this._searchResult(params)
      } else{
        this.fetchData()
      }
    },
    showModel() {
      this.$refs.dialog.changeVisable()
    },
    fetchData() {
      this.listLoading = true
      getList(this.page).then(response => {
        if (response.code === 200) {
          this.total = response.data.total
          this.list = response.data.list
          this.listLoading = false
          // console.log(this.total, this.list)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container{
  position: relative;
}
.el-table{
  margin-bottom: 50px;
}
.el-table /deep/ .cell{
  color: rgb(51, 51, 51);
  font-size: 14px;
  text-align: center;
}
.el-input /deep/ input{
  outline: none;
  border: none;
}
.el-table /deep/ .el-row{
  display: flex;
  justify-content: space-between;
}
.el-input /deep/ .el-input-group__append{
  padding: 0 !important;
  border: none;
  width: 0;
}
.el-input /deep/ .el-input__inner{
  border-radius: 12px;
  padding-right: 0;
  box-sizing: border-box;
}
.app-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0 !important;
  margin-bottom: 20px;
  .header-left{
    display: flex;
    justify-content: flex-start;
    width: 320px;
    .search-title{
      font-family: SourceHanSansSC;
      font-weight: 400;
      font-size: 14px;
      color: rgb(16, 16, 16);
      font-style: normal;
      letter-spacing: 0px;
      line-height: 42px;
      margin-right: 20px;
      white-space: nowrap;
    }
    // .input-wrapper{
    //   border: 1px solid #ccc;
    //   border-radius: 6px;
    // }
    .top-input{
      margin-left: 20px;
      .el-input{
        width: 332px;
        height: 32px !important;
        border: 1px solid #ccc;
        border-radius: 6px;
      }
      .el-button{
        margin: 0 !important;
        height: 32px;
      }
    }
    .el-button /deep/ .el-icon-search{
      font-size: 25px;
      position: relative;
      top: -4px
    }
    .el-input /deep/ .el-input-group__append{
      background-color: rgb(221, 221, 221) !important;
      box-sizing: border-box;
      width: 67px !important;
    }
    
  }
  .header-right{
    .header-btn-one{
      width: 87px;
      height: 30px;
      background-color: rgb(27, 166, 135);
      border-radius: 6px;
      font-size: 14px;
      padding: 0px;
      border-width: 0px;
      border-style: solid;
      text-align: center;
      line-height: 20px;
      font-weight: normal;
      font-style: normal;
      opacity: 1;
    }
    .header-btn-two{
      width: 87px;
      height: 30px;
      background-color: rgb(27, 166, 135);
      border-radius: 6px;
      font-size: 14px;
      padding: 0px;
      border-width: 0px;
      border-style: solid;
      text-align: center;
      line-height: 20px;
      font-weight: normal;
      font-style: normal;
      opacity: 1;
    }
  }
  
}
.el-row{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  .el-button{
    width: 70px;
    height: 34px;
    border-radius: 6px;
    font-size: 14px;
    padding: 0px;
    border-width: 0px;
    border-style: solid;
    text-align: center;
    line-height: 20px;
    font-weight: normal;
    font-style: normal;
    opacity: 1;
    &:nth-child(1){
      background-color: rgb(27, 166, 135);
    }
    &:nth-child(2){
      background-color: rgb(90, 152, 222);
    }
    &:nth-child(3){
      background-color: rgb(59, 57, 78);
    }
  }
}
.el-table{
  .el-table_1_column_6{
    width: 200px;
  }
}
// .dialog{
//   width: 100%;
//   height: 100%;
//   position: absolute;
//   left: 0;
//   right: 0;
//   top: 0;
//   bottom: 0;
//   z-index: 999;
// }
</style>
